import React, { useState } from 'react';
import styles from './index.module.scss';
import { Button, Tooltip } from 'antd';
import { ShareAltOutlined, MailOutlined, FormOutlined } from '@ant-design/icons';
import { RouteComponentProps, withRouter } from 'react-router-dom';
import { connect } from 'react-redux';
import EmailSubs from 'src/pages/Components/EmailSubscription';
import PublishShare from './PublishShare';
import { encryptParam } from 'src/libs/paramsEncrypt';

interface IProps {
	title: string;
	/* match: {
		params: {
			id: string;
			isEdit: string;
		}
	}, */
	pageContentConfig: any,
	isPublic: boolean,
	pageId: string;
	internalFlag: string;
	btnAuth: any;
}

const PreviewTop = ( props: RouteComponentProps & IProps ) => {
	const { btnAuth } = props;
	const [ modalVisible, setModalVisible ] = useState( false );
	const [ isModalVisible, setisModalVisible ] = useState( false );
	const goEdit = () => {
		props.history.push( {
			pathname: `/analyseManage/editReport/${ encryptParam( props.pageId ) }/${encryptParam( 'true' )}/${encryptParam( 'EDIT' )}`
		} );
	};

	const toggleEmailModel = ( value: boolean ) => {
		setModalVisible( value );
	};

	const onSuccess = ( data:any ) => {
		//...
	};

	// const pageInfo = JSON.parse( props.pageContenttitleInfo );
	const titleInfo = props.pageContentConfig.page;
	// console.log( titleInfo );
	const titleStyle = {
		// height: `${titleInfo.mainTitleHeight || 50}px`,
		// backgroundColor: titleInfo.mainTitleBackColor,
		fontSize: `${ titleInfo.mainTitleFontSize || 18 }px`,
		fontFamily: titleInfo.mainTitleFontFamily,
		// alignItems: titleInfo.mainTitleAlignVer || 'center',
		// justifyContent: justifyContent,
		color: titleInfo.mainTitleFontColor,
		textDecoration: titleInfo.mainTitleIsUnderLine ? 'underline' : 'none',
		fontStyle: titleInfo.mainTitleIsItalic ? 'italic' : 'normal',
		fontWeight: titleInfo.mainTitleIsBold ? 700 : 400,
		flex: 1,
		textAlign: titleInfo.mainTitleAlignHor,
		alignSelf: titleInfo.mainTitleAlignVer,
	};
	const deloitteFlag = titleInfo.deloitteFlag; //是否德勤方案
	const internalFlag = props.internalFlag; //是否内部用户
	// 外部用户不能编辑德勤方案
	const editable = internalFlag === '1' || ( internalFlag !== '1' && deloitteFlag !== '1' );
	return (
		<div className={ styles.report_header } style={ { backgroundColor: titleInfo.mainTitleBackColor } }>
			<span style={ titleStyle }>{ props.title }</span>
			{
				!props.isPublic && (
					<div style={ { width: '120px' } }>
						{
							btnAuth.includes( 'bi_previewReport_share' ) && (
								<Tooltip placement="bottomRight" title="公开分享">
									<Button
										type="text" icon={ <ShareAltOutlined className={ styles.greenBtn }/> }
										onClick={ () => { setisModalVisible( true );} }></Button>
								</Tooltip>
							)
						}

						{
							btnAuth.includes( 'bi_previewReport_email' ) && (
								<Tooltip placement="bottomRight" title="定时邮件">
									<Button
										type="text" icon={ <MailOutlined className={ styles.greenBtn }/> }
										onClick={ () => {
											toggleEmailModel( true );
										} }></Button>
								</Tooltip>
							)
						}

						{/* 外部用户不能编辑德勤方案 */}
						{
							editable && btnAuth.includes( 'bi_previewReport_edit' ) && (
								<Tooltip placement="bottomRight" title="编辑">
									<Button
										type="text" icon={ <FormOutlined className={ styles.greenBtn }/> }
										onClick={ () => {
											goEdit();
										} }></Button>
								</Tooltip>
							)
						}
					</div>
				)
			}

			{/* 邮件订阅 */}
			<EmailSubs modalVisible={ modalVisible }
				pageId={props.pageId}
				onSuccess={onSuccess}
				closeModal={ () => { toggleEmailModel( false ); } }
			></EmailSubs>

			<PublishShare isModalVisible={isModalVisible} pageId={props.pageId} onCancel={() => setisModalVisible( false )}></PublishShare>
		</div>
	);
};

//	映射state到当前组件
const mapStateToProps = ( state: any ) => {
	return {
		pageContentConfig: state.editorHistory.present.pageContentConfig,
		internalFlag: state.user.internalFlag,
		btnAuth: state.btnAuth,
	};
};

export default withRouter( React.memo( connect(
	mapStateToProps
)( PreviewTop ) ) );
